<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>MglUI-常规</title>
    <meta name="keywords" content="不锈钢,钢铁,电商">
    <meta name="description" content="江苏东方不锈钢找货助手">

    <!-- MglUI core CSS -->
    <link href="./assets/css/mgui.css" rel="stylesheet" charset="utf-8">
    <link href="./assets/css/style.css" rel="stylesheet" charset="utf-8">

    <!-- 弹窗 core CSS -->
    <link href="./assets/lib/artdialog/ui-dialog.css" rel="stylesheet" charset="utf-8">

    <!-- 通知 core CSS -->
    <link href="./assets/lib/gritter/jquery.gritter.css" rel="stylesheet" charset="utf-8">

    <!-- HTML5shiv 和 Respond.js IE8支持HTML5 tooltipss和媒体查询 -->
    <!--[if lt IE 9]>
        <script src="./assets/js/html5shiv.js"></script>
        <script src="./assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body>
    <section id="container">
        <!--header start-->
        <header class="ui-header ui-header-positive clearfix">
            <div class="ui-col ui-col-20"><h2 class="logo" onclick="window.location.href='/'">CRM管理系统</h2></div>
            <div class="ui-col ui-col-60">
                <ul class="header-nav-sys">
                    <li class="active"><i class="ico-crm-sprite ico-crm-sys"></i>CRM</li>
                </ul>
            </div>
            <div class="ui-col ui-col-20">
                <ul class="top-menu pull-right">
                    <li>
                        <a class="menu-down" href="javascript:;"><i class="icon-people"></i>186******75</a>
                        <div class="dropdown-menu">
                            <a href="/">退出</a>
                            <a href="/">退出</a>
                        </div>
                    </li>
                </ul>
            </div>
        </header>
        <!--header end-->

                <!--sidebar start-->
        <div class="ui-sidebar ui-sidebar-positive" id="sidebar-menu">
            <div class="sidebar-toggle"><i class="icon-sanshuxian"></i></div>
            <!-- sidebar menu start-->
            <ul class="sidebar-menu">
                <li>
                    <a href="index.html">
                        <i class="icon-home1"></i>
                        <span>首页</span>
                    </a>
                </li>
                <li>
                    <a class="ui-arrowadd" href="javascript:;">
                        <i class="icon-photogallery"></i>
                        <span>UI元素</span>
                    </a>
                    <ul class="sub-menu">
                        <li><a class="active" href="general.html"><i class="icon-mac"></i><span>常规</span></a></li>
                        <li><a href="button.html"><i class="icon-sort"></i><span>按钮</span></a></li>
                        <li><a href="tabs.html"><i class="icon-keyboard"></i><span>Tab</span></a></li>
                        <li><a href="iconfont.html"><i class="icon-love"></i><span>字体图标</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="ui-arrowadd" href="javascript:;">
                        <i class="icon-iconxuexisel"></i>
                        <span>组件</span>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="grids.html"><i class="icon-list1"></i><span>网格</span></a></li>
                        <li><a href="calendar.html"><i class="icon-carlendar"></i><span>日历</span></a></li>
                        <li><a href="charts.html"><i class="icon-booking"></i><span>图表</span></a></li>
                    </ul>
                </li>
                <li>
                    <a class="ui-arrowadd" href="javascript:;">
                        <i class="icon-bill"></i>
                        <span>表单</span>
                    </a>
                    <ul class="sub-menu">
                        <li><a href="form-component.html"><i class="icon-creditcard"></i><span>表单组件</span></a></li>
                        <li><a href="form-validator.html"><i class="icon-coupon"></i><span>表单验证</span></a></li>
                        <li><a href="form-wizard.html"><i class="icon-coupon"></i><span>表单向导</span></a></li>
                    </ul>
                </li>
                <li>
                    <a href="table.html">
                        <i class="icon-carlendar"></i>
                        <span>表格</span>
                    </a>
                </li>
                <li>
                    <a href="mail.html">
                        <i class="icon-mail1"></i>
                        <span>邮件</span>
                        <span class="ui-badge bg-important">2</span>
                    </a>
                </li>
                <li>
                    <a href="login.html">
                        <i class="icon-user"></i>
                        <span>登录页</span>
                    </a>
                </li>
            </ul>
            <!-- sidebar menu end-->
        </div>
        <!--sidebar end-->

        <section class="main-content">
            <section class="wrapper">
                <div class="ui-row">
                    <div class="ui-col ui-pw15">
                        <ul class="ui-breadcrumb ui-mb18">
                            <li><i class="icon-shouyefill"></i>首页</li>
                            <li>商品列表</li>
                            <li>商品详情</li>
                            <li>正文</li>
                        </ul>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-pw15">
                        <div class="ui-panel">
                            <div class="ui-panel-body">
                                <div class="ui-whitespace ui-col ui-col-50">
                                    <p>默认字体大小13px, 行高为1.4</p>
                                    <h1>标题：h1, 18px</h1>
                                    <h2>栏目：h2, 17px</h2>
                                    <h3>内文：导航，正文段落h3, 16px</h3>
                                    <h4>内文：人名歌名标题等h4, 16px</h4>
                                    <h5>副内文：h5, 同ui-txt-sub, 14px</h5>
                                    <h6>辅助文字：h6, 同ui-txt-tips, 12px</h6>
                                </div>

                                <div class="ui-whitespace ui-col ui-col-50">
                                    <p class="ui-txt-default">主要内容色</p>
                                    <p class="ui-txt-white" style="background:#000">主要内容反色</p>
                                    <p class="ui-txt-info">辅助次要内容色</p>
                                    <p class="ui-txt-muted">时间，输入框，不可点击状态文本色</p>
                                    <p class="ui-txt-warning">警示，会员红名，搜索热词，同ui-txt-red</p>
                                    <p class="ui-txt-highlight">关键词高亮，同em</p>
                                    <p><a>链接颜色</a></p>
                                    <p class="ui-txt-feeds">feeds链接</p>
                                    <div class="ui-nowrap">
                                        内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略，内容文字超出长度省略
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="ui-row">
                    <div class="ui-col ui-col-50 ui-pw15">
                        <div class="ui-panel">
                            <div class="ui-panel-body">
                                <div class="ui-alert ui-alert-success ui-mb12">
                                    <button class="ui-close" onclick="alertClose(this)" type="button">
                                    <i class="icon-remove"></i>
                                </button>
                                    <h2><i class="icon-wancheng"></i>成功!</h2>
                                    <p>提示信息，点击右上角可关闭，移除节点...</p>
                                </div>
                                <div class="ui-alert ui-alert-danger ui-mb12">
                                    <button class="ui-close" onclick="alertClose(this)" type="button">
                                    <i class="icon-remove"></i>
                                </button>
                                    <p><strong>警告！</strong>警告信息，点击右上角可关闭，移除节点...</p>
                                </div>
                                <div class="ui-alert ui-alert-success ui-mb12">
                                    <button class="ui-close" onclick="alertClose(this)" type="button">
                                    <i class="icon-remove"></i>
                                </button>
                                    <p><strong>成功！</strong>成功信息，点击右上角可关闭，移除节点...</p>
                                </div>
                                <div class="ui-alert ui-alert-info ui-mb12">
                                    <button class="ui-close" onclick="alertClose(this)" type="button">
                                    <i class="icon-remove"></i>
                                </button>
                                    <p><strong>提示！</strong>提示信息，点击右上角可关闭，移除节点...</p>
                                </div>
                                <div class="ui-alert ui-alert-warning">
                                    <button class="ui-close" onclick="alertClose(this)" type="button">
                                    <i class="icon-remove"></i>
                                </button>
                                    <p><strong>警告！</strong>警告信息，点击右上角可关闭，移除节点...</p>
                                </div>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">进度条</div>
                            <div class="ui-panel-body">
                                <p class="ui-txt-info ui-mb4">默认进度</p>
                                <div class="ui-progress ui-mb12">
                                    <div class="ui-progress-bar ui-blue-bg" style="width: 35%"></div>
                                </div>

                                <p class="ui-txt-info ui-mb4">小号进度</p>
                                <div class="ui-progress ui-progress-sm ui-mb12">
                                    <div class="ui-progress-bar ui-blue-bg" style="width: 22%"></div>
                                </div>

                                <p class="ui-txt-info ui-mb4">圆角进度</p>
                                <div class="ui-progress ui-progress-sm ui-progress-round ui-mb12">
                                    <div class="ui-progress-bar ui-green-bg" style="width: 28%"></div>
                                </div>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">分页标签</div>
                            <div class="ui-panel-body">
                                <div>
                                    <ul class="ui-pagination">
                                        <li class="ui-count"><a href="#">共120页</a></li>
                                        <li class="ui-home-page"><a href="#">首页</a></li>
                                        <li class="ui-up-page"><a href="#">«</a></li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li class="active"><a href="#">3</a></li>
                                        <li><a href="#">···</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li class="ui-next-page"><a href="#">»</a></li>
                                        <li class="ui-last-page"><a href="#">尾页</a></li>
                                        <li class="ui-txt-page"><input type="text" value="12" /></li>
                                        <li class="ui-go-page"><a href="#">跳转</a></li>
                                    </ul>
                                </div>

                                <div>
                                    <ul class="ui-pagination ui-pagination-lg">
                                        <li><a href="#">«</a></li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </div>

                                <div>
                                    <ul class="ui-pagination ui-pagination-sm">
                                        <li><a href="#">«</a></li>
                                        <li><a href="#">1</a></li>
                                        <li><a href="#">2</a></li>
                                        <li><a href="#">3</a></li>
                                        <li><a href="#">4</a></li>
                                        <li><a href="#">5</a></li>
                                        <li><a href="#">»</a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="ui-col ui-col-50 ui-pw15">
                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">弹窗(文档：<a href="http://aui.github.io/artDialog/" target="_black">http://aui.github.io/artDialog/</a>)</div>
                            <div class="ui-panel-body">
                                <button id="btn-a" type="button" class="ui-btn ui-btn-primary">默认弹窗</button>
                                <button id="btn-b" type="button" class="ui-btn ui-btn-info">浮层关闭</button>
                                <button id="btn-c" type="button" class="ui-btn ui-btn-success">无浮层关闭</button>
                                <button id="btn-d" type="button" class="ui-btn ui-btn-success">加载load</button>
                                <button id="btn-e" type="button" class="ui-btn ui-btn-success">自定义</button>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">气泡(与弹窗一致)</div>
                            <div class="ui-panel-body">
                                <button id="align-a" type="button" class="ui-btn ui-btn-primary">底部气泡</button>
                                <button id="align-b" type="button" class="ui-btn ui-btn-info">左侧气泡</button>
                                <button id="align-c" type="button" class="ui-btn ui-btn-success">右侧气泡</button>
                                <button id="align-d" type="button" class="ui-btn ui-btn-success">上部气泡</button>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">Gritter 通知(<a href="https://github.com/jboesch/Gritter" target="_black">https://github.com/jboesch/Gritter</a>)</div>
                            <div class="ui-panel-body">
                                <a id="add-regular" class="ui-btn ui-btn-default ui-btn-sm" href="javascript:;">默认</a>
                                <a id="add-sticky" class="ui-btn ui-btn-success ui-btn-sm" href="javascript:;">手动关闭</a>
                                <a id="add-without-image" class="ui-btn ui-btn-info ui-btn-sm" href="javascript:;">无图</a>

                                <a id="add-gritter-light" class="ui-btn ui-btn-warning ui-btn-sm" href="javascript:;">白色</a>
                                <a id="add-max" class="ui-btn ui-btn-primary ui-btn-sm" href="javascript:;">最大3个</a>
                                <a id="remove-all" class="ui-btn ui-btn-danger ui-btn-sm" href="#">清除所有</a>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">默认标签</div>
                            <div class="ui-panel-body">
                                <span class="ui-label ui-label-default">标签</span>
                                <span class="ui-label ui-label-primary">主色标签</span>
                                <span class="ui-label ui-label-success">成功标签</span>
                                <span class="ui-label ui-label-info">信息标签</span>
                                <span class="ui-label ui-label-warning">错误标签</span>
                                <span class="ui-label ui-label-danger">警告标签</span>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">圆角标签</div>
                            <div class="ui-panel-body">
                                <span class="ui-label ui-label-default ui-label-round">标签</span>
                                <span class="ui-label ui-label-primary ui-label-round">主色标签</span>
                                <span class="ui-label ui-label-success ui-label-round">成功标签</span>
                                <span class="ui-label ui-label-info ui-label-round">信息标签</span>
                                <span class="ui-label ui-label-warning ui-label-round">错误标签</span>
                                <span class="ui-label ui-label-danger ui-label-round">警告标签</span>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">小号圆角标签</div>
                            <div class="ui-panel-body">
                                <span class="ui-label ui-label-default ui-label-round ui-label-sm">标签</span>
                                <span class="ui-label ui-label-primary ui-label-round ui-label-sm">主色标签</span>
                                <span class="ui-label ui-label-success ui-label-round ui-label-sm">成功标签</span>
                                <span class="ui-label ui-label-info ui-label-round ui-label-sm">信息标签</span>
                                <span class="ui-label ui-label-warning ui-label-round ui-label-sm">错误标签</span>
                                <span class="ui-label ui-label-danger ui-label-round ui-label-sm">警告标签</span>
                            </div>
                        </div>

                        <div class="ui-panel">
                            <div class="ui-panel-header ui-border-b">数字标签</div>
                            <div class="ui-panel-body">
                                <span class="ui-badge ui-label-default">9</span>
                                <span class="ui-badge ui-label-primary">12</span>
                                <span class="ui-badge ui-label-success">132</span>
                                <span class="ui-badge ui-label-info">22</span>
                                <span class="ui-badge ui-label-warning">11</span>
                                <span class="ui-badge ui-label-danger">56</span>
                            </div>
                        </div>
                    </div>
                </div>

            </section>
        </section>

    </section>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!--dialog 弹窗插件-->
<script src="./assets/lib/artdialog/dialog.js"></script>

<!--gritter 通知插件-->
<script src="./assets/lib/gritter/jquery.gritter.js"></script>

<!--弹窗、通知插件 私有的js配置文件-->
<script src="./assets/js/mgui.js"></script>
<script src="./assets/js/artdialog-script.js"></script>
<script src="./assets/js/gritter-script.js"></script>

</html>
